<template>
  <div>
    <el-select
          v-model="currentCoin"
          clearable
          filterable
          reserve-keyword
          placeholder="请选择链" @change="onChange" @clear="onClear" :size="size">
          <el-option
            v-for="item in list"
            :key="item.name"
            :label="item.name"
            :value="item.symbol">
          </el-option>
        </el-select>
  </div>
</template>

<script>
import { listCoins  } from "@/api/aipay/common";

export default {
  name: "MainCoin",
  props: {
  },
  data() {
    return {
      list: [],
      currentCoin: this.coin
    };
  },
  props: {
    // 值
    coin: {
      type: String,
      default: '',
    },
    type: {
      type: Number,
      default: null,
    },
    init: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: '',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      listCoins(this.type).then(response => {
        this.list = response.data;
        if(this.init){
          this.currentCoin = response.data[0].symbol
          this.$emit('update:coin', response.data[0].symbol)
        }
      });
    },
    onChange(value){
      if(!value){
        return;
      }
      this.$emit("change", value);
      this.$emit('update:coin', value)
    },
    onClear(){
      this.$emit("change", "");
      this.$emit('update:coin', "")
    }
  }
};
</script>

<style scoped lang="scss">
</style>